<!DOCTYPE html>

<body>

    通过脚本来绘制图形 <br />
    <canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>

    <canvas id="myCanvas2"></canvas>
    <canvas id="myCanvas3"></canvas>

    <p>Canvas还能绘制标题，这样好像就可以不用图片也行呀</p>
    <canvas id="myCanvas4"></canvas>

    <p>画个笑脸</p>
    <canvas id="test-stock" width="300" height="200">
        <p>Current Price: 25.51</p>
    </canvas>
</body>


<script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 80, 100);

    var c = document.getElementById("myCanvas2");
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();

    var c = document.getElementById("myCanvas3");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();

    var c = document.getElementById("myCanvas4");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.strokeText("Hello World", 10, 50);

    // 拉上炫酷的渐变色
    // Create gradient
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(0.5, "white");

    // Fill with gradient
    ctx.fillStyle = grd;
    // ctx.strokeText("Hello World", 10, 50);
    ctx.fillRect(10, 10, 150, 80);

    function drawSmile() {
        var
            canvas = document.getElementById('test-stock'),
            ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
        ctx.fillStyle = '#dddddd'; // 设置颜色
        ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
        // 利用Path绘制复杂路径:
        var path = new Path2D();
        // gl = canvas.getContext("webgl"); // 绘制3D图像
        path.arc(75, 75, 50, 0, Math.PI * 2, true);
        path.moveTo(110, 75);
        path.arc(75, 75, 35, 0, Math.PI, false);
        path.moveTo(65, 65);
        path.arc(60, 65, 5, 0, Math.PI * 2, true);
        path.moveTo(95, 65);
        path.arc(90, 65, 5, 0, Math.PI * 2, true);
        ctx.strokeStyle = '#0000ff';
        ctx.stroke(path);
    }
    drawSmile()
</script>